<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>答题</title>
    <script src="js/sjw_pub_750.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/vue.js"></script>
</head>
<body>
	<div class="box">
		<div class="bg"></div>
		<div id="sub">
	        <div v-for="(item,index) in list" v-show="index == current">
	        	<div class="titles">第{{item.num}}/10题</div>
	            <div class="title" :data-status="item.status">{{item.title}}</div>
	            <p :data-status="lists.status" :data-state="lists.state" v-for="lists in item.children" @click="choose(lists.status,lists)" :class="{active:lists.state}"><font>{{lists.type}}</font> {{lists.name}}</p>
	        	<div class="tip" @click="item.tip = true"><img src="images/img008.png"/> 提示</div>
	        	<p v-show="item.tip == true" class="tips">{{item.tips}}</p>
	        </div>
	        <div class="score" v-show="current == list.length">
	        	<div class="score_img"><img src="images/img009.png"/></div>
	        	<div class="succes">恭喜您，完成答题！</div>
	        	<div class="scores">{{grade}}</div>
	        	<div class="score_chance">当前剩余1次参与机会</div>
	        	<a href="" class="share">立即分享+1</a>
	        	<a @click="personal = true" class="again">再玩一次</a>
	        	<div class="ewm">
	        		<img src="images/img012.png"/>
	        		<span>长按识别二维码，关注“发现美好盐田”微信公众号，及时接受获奖信息</span>
	        	</div>
	        </div>
	        <div class="btn" @click="submit()" v-show="current !== list.length">{{refer}}</div>
	        <div class="shadowz" v-show="personal == true" ></div>
	        <div class="personal" v-show="personal == true">
		    	<div class="personal_box">
		    		<div class="personal_title">个人资料</div>
			    	<input type="text" placeholder="姓名" />
			    	<input type="text" placeholder="手机" />
			    	<div class="personal_infor">以上信息仅用于兑奖时充值话费，如中奖者未填写的视为自动放弃</div>
			    	<span>立即提交</span>
		    	</div>
		    	<img @click="personal = false" class="closes" src="images/img006.png"/>
		    </div>
	   </div>
	</div>
</body>
</html>
<script>
    window.onload = function(){
        new Vue({
            el:"#sub",
            data:{
                current:0,
                list:[
                    {title:"文明城市的博物馆、纪念馆等爱国主义教育基地，对集体参观的未成年人要实行",status:false,num:1,tips:'1',tip:false,
                        children:[
                        {type:"A",name:'适当优惠',status:true,state:false},
                        {type:"B",name:'全票',status:false,state:false},
                        {type:"C",name:'半票参观',status:false,state:false},
                        {type:"D",name:'免费开放',status:true,state:false}
                    ]},
                    {title:"文明城市的博物馆、纪念馆等爱国主义教育基地，对集体参观的未成年人要实行1",status:false,num:2,tips:'2',tip:false,
                        children:[
                        {type:"A",name:'适当优惠',status:true,state:false},
                        {type:"B",name:'全票',status:false,state:false},
                        {type:"C",name:'半票参观',status:false,state:false},
                        {type:"D",name:'免费开放',status:false,state:false}
                    ]},
                    {title:"文明城市的博物馆、纪念馆等爱国主义教育基地，对集体参观的未成年人要实行2",status:false,num:3,tips:'3',tip:false,
                        children:[
                        {type:"A",name:'适当优惠',status:true,state:false},
                        {type:"B",name:'全票',status:false,state:false},
                        {type:"C",name:'半票参观',status:false,state:false},
                        {type:"D",name:'免费开放',status:false,state:false}
                    ]},
                ],
                refer:'下一题',
                grade:0,
                personal:false
            },
            methods:{
                submit:function(){
                    if(this.current == this.list.length-1){
                         for(var i = 0;i<this.list.length;i++){
                            for(j=0;j<this.list[i].children.length;j++){
                                if(this.list[i].children[j].status == this.list[i].children[j].state){
                                    if(this.list[i].children[j].status){
                                        // this.grade +=Math.ceil((100/this.list.length));
                                        this.list[i].status = true;
                                    }
                                }else{
                                    // this.list[i].status = false;
                                    Object.defineProperty(this.list[i],'status',{
                                        writable:false,
                                        value:false
                                    })
                                }
                            }
                            if(this.list[i].status == true){
                                this.grade +=Math.ceil((100/this.list.length));
                                if(this.grade >100){
                                    this.grade = 100;
                                }
                            }
                        }
                        this.refer = "得分";
                        this.current +=1;
                        
                    }else if(this.current < this.list.length){
                        this.current +=1;
                        
                    }
                    
                },
                choose:function(status,lists){
                    lists.state = !lists.state;
                }
            }
        })
    }
</script>